<template>
  <view style="padding-bottom: 50px">
    <view class="header">
      <image :src="filterRefundStatus(detail.refundStatus).img" />
      <view class="title">
        <view class="text1">{{
          filterRefundStatus(detail.refundStatus).status
        }}</view>
        <view class="text2">{{
          filterRefundStatus(detail.refundStatus).content
        }}</view>
      </view>
    </view>

    <!-- <view class="items">
      <view>
        <view>退款金额</view>
        <view>¥{{ item.productSkuPrice }}</view>
      </view>
    </view> -->

    <view class="refundLogs items">
      <label>退款进度</label>

      <view class="Logs">
        <oreo-steps
          :steps="steps"
          :active="0"
          direction="vertical"
          inactive-color="#d9d9d9"
          active-color="#38f"
        />
      </view>
    </view>

    <view class="items">
      <label>退款信息</label>
      <view class="item_body" v-for="item in detail.items" :key="item.id">
        <view class="flex goodsItem">
          <view
            class="goods-cover cover"
            :style="{ backgroundImage: `url(${item.productImageUrl})` }"
          ></view>
          <view class="flex" style="width: 100%">
            <view class="goods-name">
              <view class="name">{{ item.productName }}</view>
              <view class="sku"
                >{{
                  item.productSkuSpData[0].key +
                  "*" +
                  item.productSkuSpData[0].value
                }}
              </view>
            </view>
          </view>
          <view class="order-total">
            <view class="goods-count">x{{ item.productSkuQuantity }}</view>
          </view>
        </view>
      </view>
      <view class="refundInfo">
        <view class="flex justify-between refundInfo_item">
          <view>退款单号</view>
          <view>{{ detail.id }}</view>
        </view>
        <view class="flex justify-between refundInfo_item">
          <view>退款原因</view>
          <view>{{ detail.refundReason }}</view>
        </view>
        <view class="flex justify-between refundInfo_item">
          <view>退款金额</view>
          <view>¥{{ detail.refundAmount }}</view>
        </view>
      </view>
    </view>
  </view>

  <view class="bottom_btn">
    <button
      @click="refundTo(detail.orderId, detail.refundStatus)"
      v-if="detail.refundStatus === 7 || detail.refundStatus === 8"
    >
      申请退款
    </button>
    <button
      @click="cancel"
      v-if="
        detail.refundStatus === 1 ||
        detail.refundStatus === 2 ||
        detail.refundStatus === 3 ||
        detail.refundStatus === 4
      "
    >
      撤销申请
    </button>
    <button
      class="primary"
      v-if="detail.refundStatus === 1 || detail.refundStatus === 2"
      @click="
        linkTo(
          '/personalPages/order/refundApplication?id=' +
            detail.orderId +
            '&type=' +
            detail.refundScope
        )
      "
    >
      修改申请
    </button>
    <button
      v-if="detail.refundStatus === 3"
      class="primary"
      @click="linkTo('/personalPages/order/logisticsInfo?id=' + refundId)"
    >
      填写物流
    </button>
  </view>

  
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import { refundDetail, refundCancel } from "@/services/mall";
import { message, ossImg, debounce } from "@/utils/utils";
import { Subscribe } from "@/services/utils";
import { cal } from "@/utils/cal";
import privacyPopup from "@/components/privacy-popup";

const detail = ref({});

const steps = ref([]);
const refundId = ref("");

onLoad((option) => {
  console.log(option);
  refundId.value = option.id;
});

onShow(() => {
  getApp().accessLogAdd();
  GetDetail(refundId.value);
});

const linkTo = (url) => uni.navigateTo({ url });

const refundTo = (id, refundStatus) => {
  console.log(refundStatus);
  uni.requestSubscribeMessage({
    tmplIds: [
      process.env.REFUNDSUCCESSNOTICE,
      process.env.AUDITRESULTNOTICE,
      process.env.RETURNREVIEWNOTICE,
    ],
    success: async (res2) => {
      console.log(res2);
      // 订阅成功
      await Subscribe({
        appId: process.env.WXAPPID,
        orderId: id,
        scene: ["REFUND_SUCCEED", "REFUND_ACCEPT", "REFUND_REJECT"],
      });
      //   linkTo('/personalPages/order/refundDetail?id=' + id)
      if (refundStatus !== 0 || refundStatus !== null) {
        linkTo("/personalPages/order/refundType?id=" + id);
      } else {
        linkTo("/personalPages/order/refundDetail?id=" + id);
      }
    },
    fail: function (err) {
      console.log(err);
    },
  });
};

const cancel = debounce(
  async () => {
    uni.showModal({
      title: "",
      content: "撤销后，如果问题未解决，您可以再次发起退款申请。确定撤销吗？",
      cancelText: "暂不撤销",
      confirmText: "确定撤销",
      success: async function (res) {
        if (res.confirm) {
          const data = await refundCancel({ orderRefundId: detail.value.id });
          if (data?.code === 200) {
            message("撤销成功");
            uni.navigateBack({ delta: 1 });
          } else {
            message(data.message);
          }
        } else if (res.cancel) {
          message("取消撤销");
        }
      },
    });
  },
  500,
  false
);

const GetDetail = async (id) => {
  const res = await refundDetail(id);
  if (res?.code === 200) {
    detail.value = res.data;
    steps.value = res.data.logs.map((obj) => {
      return {
        text: filterOperatorType(obj.operatorType) + filterLogType(obj.logType),
        desc: obj.createTime,
        activeIcon: ossImg("order/point@2x.png"),
      };
    });
  }
};

const filterLogType = (type) => {
  let text = "";
  switch (type) {
    case 1:
      text = "发起退款";
      break;
    case 2:
      text = "拒绝退款";
      break;
    case 3:
      text = "同意退款";
      break;
    case 4:
      text = "退款成功";
      break;
    case 5:
      text = "修改退款";
      break;
    case 6:
      text = "撤销退款";
      break;
    case 7:
      text = "退货寄出";
      break;
    case 8:
      text = "收到退货";
      break;

    default:
      break;
  }
  return text;
};

const filterOperatorType = (type) => {
  let text = "";
  switch (type) {
    case 0:
      text = "系统";
      break;
    case 1:
      text = "管理员";
      break;
    case 2:
      text = "顾客";
      break;

    default:
      break;
  }
  return text;
};

const filterRefundStatus = (type) => {
  let obj = {
    img: "",
    status: "",
    content: "",
  };
  switch (type) {
    case 1:
      obj = {
        img: ossImg("order/refundTime.png"),
        status: "等待商家审核",
        content: "您已经成功发起退款申请，请耐心等待商家处理",
      };
      break;
    case 2:
      obj = {
        img: ossImg("order/refundRefuse.png"),
        status: "商家已拒绝您的退款申请",
        content: "请在7天内处理，超时未处理订单将自动关闭",
      };
      break;
    case 3:
      obj = {
        img: ossImg("order/refundTime.png"),
        status: "已同意申请,待买家退货",
        content: "请在7天内处理，超时未处理订单将自动关闭",
      };
      break;
    case 4:
      obj = {
        img: ossImg("order/refundTime.png"),
        status: "已退货,待门店收货",
        content: "您已经成功发起退款申请，请耐心等待商家处理",
      };
      break;

    case 5:
      obj = {
        img: ossImg("order/refundTime.png"),
        status: "退款中",
        content: "您已经成功发起退款申请，请耐心等待商家处理",
      };
      break;
    case 6:
      obj = {
        img: ossImg("order/refundSuccess.png"),
        status: "退款成功",
        content: "退款金额已退回至您的付款账户，请注意查收",
      };
      break;
    case 7:
      obj = {
        img: ossImg("order/refundClose.png"),
        status: "退款失败",
        content: "",
      };
      break;

    case 8:
      obj = {
        img: ossImg("order/refundClose.png"),
        status: "退款关闭",
        content: "买家已撤销退款申请",
      };
      break;

    default:
      break;
  }

  return obj;
};
</script>
<style lang="less" scoped>
@import "@/static/css/theme.less";

.header {
  position: relative;
  width: 100%;
  height: 84px;
  background: linear-gradient(90deg, #0058c6 0%, #086ff0 100%);

  image {
    width: 71px;
    height: 64px;
    position: absolute;
    right: 20.5px;
    top: 20px;
  }

  .title {
    padding: 0 20px;

    .text1 {
      padding-top: 18.5px;
      font-size: 16px;
      color: #ffffff;
    }

    .text2 {
      font-size: 12px;
      color: #dde4f5;
      padding-top: 12px;
    }
  }
}

.items {
  width: 100%;
  padding: 15px 10px;
  background-color: #ffffff;
  margin-top: 10px;
  box-sizing: border-box;
}

.refundLogs {
  font-size: 14px;

  :deep(.van-step__title) {
    color: #242424 !important;

    :nth-child(2) {
      font-size: 12px;
      color: #b8b8b8 !important;
      margin-top: 5px;
    }
  }

  :deep(.van-steps--vertical) {
    padding: 0 !important;
  }

  :deep(.van-step--vertical) {
    padding: 10px 10px 0 0 !important;
  }

  :deep(.van-step__circle-container) {
    height: 0 !important;
  }
}

.item_body {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  margin-bottom: 10px;

  .goodsItem {
    margin-top: 10px;
  }

  .goods-cover {
    width: 68px;
    min-width: 68px;
    height: 68px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.2);
  }

  .goods-name {
    padding: 0 12px 0 8px;
    box-sizing: border-box;
    font-size: 14px;
    width: 250px;
    flex: 1;
    color: #353535;

    .name {
      width: 100%;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 36px;
    }

    .sku {
      background-color: #f0f1f3;
      font-size: 12px;
      padding: 5px;
      width: 200px;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .order-total {
    color: #353535;
    text-align: right;
    font-size: 14px;

    .goods-count {
      font-size: 12px;
      color: #818181;
      line-height: 1;
      margin-top: 48px;
    }
  }
}

.refundInfo {
  color: #818181;
  font-size: 14px;

  .refundInfo_item {
    margin-top: 15px;
  }
}

.bottom_btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: white;
  text-align: right;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .primary {
    color: @primary-color;
    border-color: @primary-color;
  }

  button {
    margin-top: 15px;
    margin-right: 10px;
    display: inline-block;
    padding: 0px 5px;
    line-height: 24px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #2c2c2c;
    border-radius: 12px;
    font-size: 12px;
    color: #1b1b1b;

    &::after {
      border: none;
    }
  }
}
</style>
